<template>
  <div style="border: 1px solid blue">
    <h5>我是子组件</h5>
    <p>我是从父组件得到的数据： {{ value }}</p>
    <div>
      <el-button @click="update">子组件想修改父组件数据</el-button>
    </div>
    <!-- <child3Vue :value="value" /> -->
    <!-- 下面的写法，就相当于 this.value = $event -->
    <!-- <child3Vue v-model="value" /> -->
    <child3Vue :value="value" @input="sunData" />
  </div>
</template>

<script>
import child3Vue from './child3.vue'

export default {
  components: {
    child3Vue
  },
  props: {
    value: {
      type: Number,
      required: true
    },
    item: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {}
  },
  methods: {
    update() {
      // item = {}
      //  // 这里的写法，不叫更改父组件的数据， vue是允许的，因为js的底层，储存复杂类型
      // 是吧地址储存在栈里面，值的引用储存在堆里面
      this.item.name = 'xxxx'
      // this.item = {xxxx} 这里才叫改变了父组件的数据，vue才不会让我们去改
      this.$emit('input', this.a + 1)
    },
    sunData(val) {
      this.value = val
    }
  }
}
</script>
